<script lang="ts" setup>
import type { Video01ComponentMeta } from '@/definitions/type'
import { useCompStyleRender } from '@/hooks/useCompStyleRender'
import { usePrefix } from '@/hooks/usePrefix'
import { useDesignStore } from '@/stores'
import { computed } from 'vue'
import './RenderVideo01.less'

defineOptions({
  name: 'RenderVideo01',
})
const props = defineProps<{
  render: Video01ComponentMeta
}>()
const designStore = useDesignStore()
const platform = computed(() => designStore.config.platform)
const { prefix } = usePrefix()
const { style, wraperCls } = useCompStyleRender(props)
</script>

<template>
  <div :style="style" :class="[prefix('wraper'), prefix(wraperCls), prefix(platform)]">
    <div :class="prefix('main')">
      <div :class="prefix('video-wrap')">
        <video :src="render.config.videoUrl" :poster="render.config.cover" width="100%" height="100%" :class="prefix('video-type')" controls />
      </div>
      <div v-if="render.config.title" :class="prefix('title')">
        {{ render.config.title }}
      </div>
    </div>
  </div>
</template>
